/** * 用例中心 最小用例单元 */
<template>
  <div>
    <page-header
      title="最小用例单元编辑"
      :showDebug="true"
      :cancel="cancelAdd"
      :debug="debugCase"
      :save="saveAdd"
    />
    <el-form ref="caseForm" :rules="rules" :model="caseForm" label-width="90px">
      <base-info :caseForm="caseForm" />
      <p class="tip">接口用例请求</p>
      <el-form-item style="margin-left: -80px" prop="apiCases" />
      <!-- <el-table
        :data="caseForm.apiCases"
        row-key="id"
        class="sort-table"
        size="small"
      >
        <el-table-column label="" width="60px">
          <template>
            <i
              class="iconfont icon-paixu"
              style="font-size: 24px"
            ></i>

          </template>
        </el-table-column>
        <el-table-column label="序号" prop="index" width="100px">
          <template slot-scope="scope">
            序号 {{ scope.row }}
          </template>
        </el-table-column>
        <el-table-column label="接口名称" prop="apiName"> </el-table-column>
        <el-table-column label="用例名称" prop="caseapiName"> </el-table-column>
        <el-table-column label="接口地址" prop="path"> </el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="deleteCaseApi(scope.$index)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table> -->
      
      <draggable-table :data="caseForm.apiCases" @end="ondragend">
        <draggable-table-column label="序号" type="index" />
        <draggable-table-column label="接口名称" prop="apiName" />
        <draggable-table-column label="用例名称" prop="caseapiName" />
        <draggable-table-column label="接口地址" prop="path" />
        <draggable-table-column label="操作">
          <template v-slot="{scope}">
            <el-button type="danger" size="mini" @click="deleteCaseApi(scope.$index)">删除</el-button>
          </template>
        </draggable-table-column>
      </draggable-table>
    </el-form>
    <el-button
      size="small"
      icon="el-icon-plus"
      type="text"
      @click="selectApiVisible = true"
      >新增</el-button
    >
    <el-button size="small" type="primary" @click="saveAddCaseApiIndex"
      >保存接口用例请求</el-button
    >

    <!-- 添加接口界面 -->
    <el-dialog
      title="选择接口用例"
      :visible.sync="selectApiVisible"
      width="800px"
      destroy-on-close
    >
      <select-api
        :selections="selections"
        :selectApiVisible="selectApiVisible"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="selectApiVisible = false"
          >取消</el-button
        >
        <el-button size="small" type="primary" @click="selectApiSave"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 接口编辑界面 -->
    <el-drawer
      title="接口详情"
      :visible.sync="editCaseApiVisible"
      direction="rtl"
      :with-header="false"
      destroy-on-close
      size="920px"
    >
      <div class="api-drawer-header">
        <span style="float: left; font-size: 16px">接口详情编辑</span>
        <el-button
          size="small"
          type="primary"
          style="float: right"
          @click="editCaseApiVisible = false"
          >确定</el-button
        >
      </div>
      <div class="api-drawer-body">
        <el-tabs style="width: 100%" v-model="activeTab">
          <el-tab-pane label="请求头" name="header">
            <request-header
              :reqHeader="caseApiForm.header"
              style="width: 100%"
            />
          </el-tab-pane>
          <el-tab-pane label="请求体" name="body">
            <request-body :reqBody="caseApiForm.body" style="width: 100%" />
          </el-tab-pane>
          <el-tab-pane label="PATH参数" name="query">
            <request-query :reqQuery="caseApiForm.query" style="width: 100%" />
          </el-tab-pane>
          <el-tab-pane label="前置后置脚本" name="controller">
            <controller
              :controller="caseApiForm.controller"
              style="width: 100%"
            />
          </el-tab-pane>
          <el-tab-pane label="后置结果处理" name="relation">
            <relation
              :relation="caseApiForm.relation"
              :apiId="caseApiForm.apiId"
              style="width: 100%"
            />
          </el-tab-pane>
          <el-tab-pane label="响应断言" name="assertion">
            <assertion
              :assertion="caseApiForm.assertion"
              :apiId="caseApiForm.apiId"
              style="width: 100%"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import draggableTable from './components/draggableTable'
import draggableTableColumn from "./components/draggableTableColumn"
import PageHeader from "../common/components/pageheader";
import BaseInfo from "./common/case/baseInfo";
import SelectApi from "./common/case/selectApi";
import RequestHeader from "./common/api/requestHeader";
import RequestQuery from "./common/api/requestQuery";
import RequestRest from "./common/api/requestRest";
import RequestBody from "./common/api/requestBody";
import Assertion from "./common/case/assertion";
import Relation from "./common/case/relation";
import Controller from "./common/case/controller";
import RunForm from "@/views/common/business/runForm";
import RunResult from "./common/case/runResult";

export default {
  components: {
    PageHeader,
    BaseInfo,
    SelectApi,
    RequestHeader,
    RequestQuery,
    RequestRest,
    RequestBody,
    Assertion,
    Relation,
    Controller,
    RunForm,
    RunResult,
    draggableTable,
    draggableTableColumn
  },
  data() {
    return {
      caseForm: {
        id: "",
        name: "",
        level: "P0",
        type: "API",
        environmentIds: [],
        moduleId: "",
        moduleName: "",
        commonParam: {
          functions: [],
          params: [],
          header: "",
          proxy: "",
        },
        apiCases: [],
      },
      caseApiIndexForm: {
        caseId: "",
        caseApiIndexDTO: [],
      },
      selections: [],
      editCaseApiVisible: false,
      selectApiVisible: false,
      runVisible: false,
      caseApiForm: {
        header: [],
        body: { type: "json", form: [], json: "", raw: "", file: [] },
        rest: [],
        query: [],
        assertion: [],
        relation: [],
        controller: [],
      },
      activeTab: "body",
      resultVisable: false,
      rules: {
        name: [
          { required: true, message: "用例名称不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "用例类型不能为空", trigger: "blur" },
        ],
        moduleId: [
          { required: true, message: "用例模块不能为空", trigger: "blur" },
        ],
        apiCases: [
          // {
          //   required: true,
          //   message: "请至少添加一条接口用例",
          //   trigger: "blur",
          // },
        ],
      }
    };
  },
  created() {
    this.$root.Bus.$emit("initBread", ["用例中心", "最小用例单元"]);
    this.getDetail(this.$route.params);
  },
  methods: {
    ondragend(data) {
      this.$set(this.caseForm, 'apiCases', data)
    },
    // 重新排序
    sortCaseApi() {
      for (let i = 0; i < this.caseForm.apiCases.length; i++) {
        this.caseForm.apiCases[i].index = i + 1;
      }
    },
    // 保存接口选择
    selectApiSave() {
      this.caseForm.apiCases=this.caseForm.apiCases&&this.caseForm.apiCases.length?this.caseForm.apiCases:[]
      for (let i = 0; i < this.selections.length; i++) {
        let caseApi = {
          id: this.selections[i].id,
          index: this.caseForm.apiCases&&this.caseForm.apiCases.length?this.caseForm.apiCases.length + 1:1,
          apiId: this.selections[i].apiId,
          caseapiName: this.selections[i].caseapiName,
          apiName: this.selections[i].apiName,
          path: this.selections[i].path,
          edit: false,
        };
        this.caseForm.apiCases.push(caseApi);
      }
      this.selections.splice(0, this.selections.length);
      this.selectApiVisible = false;
    },
    editCaseApi(index) {
      let caseApi = this.caseForm.apiCases[index];
      this.activeTab = "body";
      if (!caseApi.body) {
        let url = "/nore/autotest/api/detail/" + caseApi.apiId;
        this.$get(url, (response) => {
          let data = response.data;
          if (data.header) {
            data.header = JSON.parse(data.header);
          }
          if (data.body) {
            data.body = JSON.parse(data.body);
          }
          if (data.query) {
            data.query = JSON.parse(data.query);
          }
          if (data.rest) {
            data.rest = JSON.parse(data.rest);
          }
          caseApi.header = data.header;
          caseApi.body = data.body;
          caseApi.rest = data.rest;
          caseApi.query = data.query;
          caseApi.assertion = [];
          caseApi.relation = [];
          caseApi.controller = [];
          this.caseApiForm = caseApi;
          this.editCaseApiVisible = true;
        });
      } else {
        this.caseApiForm = caseApi;
        this.editCaseApiVisible = true;
      }
    },
    deleteCaseApi(index) {
      this.caseForm.apiCases.splice(index, 1);
      for (let i = 0; i < this.caseForm.apiCases.length; i++) {
        this.caseForm.apiCases[i].index = i + 1;
      }
    },
    getDetail(param) {
      if (param.caseId) {
        // 编辑
        let url = "/nore/autotest/case/detail/" + param.caseId;
        this.$get(url, (response) => {
          let data = response.data;
          if (data.environmentIds) {
            data.environmentIds = JSON.parse(data.environmentIds);
          }
          if (data.commonParam) {
            data.commonParam = JSON.parse(data.commonParam);
          }
          this.caseForm.apiCases = data.apiCases.map((caseApi) => {
            caseApi.edit = false;
            if (caseApi.header) {
              caseApi.header = JSON.parse(caseApi.header);
            }
            if (caseApi.body) {
              caseApi.body = JSON.parse(caseApi.body);
            }
            if (caseApi.query) {
              caseApi.query = JSON.parse(caseApi.query);
            }
            if (caseApi.rest) {
              caseApi.rest = JSON.parse(caseApi.rest);
            }
            if (caseApi.assertion) {
              caseApi.assertion = JSON.parse(caseApi.assertion);
            }
            if (caseApi.relation) {
              caseApi.relation = JSON.parse(caseApi.relation);
            }
            if (caseApi.controller) {
              caseApi.controller = JSON.parse(caseApi.controller);
            }
            return caseApi;
          });
          if (param.type === "copy") {
            //复用
            data.id = "";
          }
          this.caseForm = data;
        });
      }
    },
    cancelAdd() {
      this.$router.push({ path: "/caseCenter/caseManage" });
    },
    saveAdd() {
      this.$refs["caseForm"].validate((valid) => {
        if (valid) {
          this.caseForm.projectId = this.$store.state.projectId;
          let url = "/nore/autotest/case/save2";
          this.$post(url, this.caseForm, (response) => {
            this.$message.success("保存成功");
            this.$router.push({ path: "/caseCenter/caseManage" });
          });
        } else {
          return false;
        }
      });
    },
    saveAddCaseApiIndex() {
      if (this.$route.params.caseId) {
        let url = "/nore/autotest/caseApiIndex/save";
        const dataToPost = {
          caseId: this.$route.params.caseId,
          caseApiIndexDTO: this.caseForm.apiCases.map((api) => ({
            caseApiId: api.id,
            index: api.index,
          })),
        };
        this.$post(url, dataToPost, (response) => {
          this.$message.success("保存成功");
        });
      } else {
        this.$message.error("请先保存基本信息！");
      }
    },
    debugCase() {
      // 用例调试
      this.runForm.engineId = "system";
      if (this.caseForm.environmentIds.length > 0) {
        this.runForm.environmentId = this.caseForm.environmentIds[0];
      }
      this.runForm.sourceType = "temp";
      this.runForm.sourceId = this.caseForm.id;
      this.runForm.sourceName = this.caseForm.name;
      this.runForm.taskType = "debug";
      this.runForm.projectId = this.$store.state.projectId;
      this.runForm.debugData = this.caseForm;
      this.runVisible = true;
    },
    closeRun() {
      this.runVisible = false;
    },
    run(runForm) {
      let url = "/nore/autotest/run";
      this.$post(url, runForm, (response) => {
        this.taskId = response.data.id;
        this.resultVisable = true;
      });
      this.runVisible = false;
    },
    closeResult() {
      this.resultVisable = false;
    },
  },
};
</script>

<style scoped>
.api-drawer-header {
  border-bottom: 1px solid rgb(219, 219, 219);
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}
.api-drawer-body {
  padding: 10px 20px;
}
</style>
